﻿@model IEnumerable<TGBTech.Core.Models.DanhMuc.TaiKhoan>

<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">Danh sách tài khoản</div>
                <div class="tools">
                    <a href="javascript:;" class="collapse"></a>
                    <a href="#portlet-config" data-toggle="modal" class="config"></a>
                    <a href="javascript:;" class="reload"></a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-toolbar">

                    <a class="btn green" data-toggle="modal" id="tableTaiKhoan_new" href="#basic">Thêm mới</a>

                    <div class="btn-group pull-right">
                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                            Công cụ <i class="icon-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">In</a></li>
                            <li><a href="#">Lưu thành PDF</a></li>
                            <li><a href="#">Xuất ra Excel</a></li>
                        </ul>
                    </div>
                </div>
                <table class="table table-striped table-bordered table-hover" id="tableTaiKhoan">
                    <thead>
                        <tr>
                            <th><b>Mã tài khoản</b></th>
                            <th><b>Tên tài khoản</b></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr class="odd gradeX">
                                <td>@item.Id</td>
                                <td>@item.Name</td>
                                <td><a class="edit" href="javascript:;">Sửa</a></td>
                                <td><a class="delete" href="javascript:;">Xóa</a></td>
                            </tr>
                        }

                    </tbody>
                </table>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<!-- END PAGE CONTENT -->
<script>
        var TableEditable = function () {
            return {

                //main function to initiate the module
                init: function () {
                    function restoreRow(oTable, nRow) {
                        var aData = oTable.fnGetData(nRow);
                        var jqTds = $('>td', nRow);

                        for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                            oTable.fnUpdate(aData[i], nRow, i, false);
                        }

                        oTable.fnDraw();
                    }

                    function editRow(oTable, nRow) {
                        var aData = oTable.fnGetData(nRow);
                        var jqTds = $('>td', nRow);
                        jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
                        jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
                        jqTds[2].innerHTML = '<a class="edit" href="">Save</a>';
                        jqTds[3].innerHTML = '<a class="cancel" href="">Cancel</a>';
                    }

                    function saveRow(oTable, nRow) {
                        var jqInputs = $('input', nRow);
                        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
                        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
                        oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 2, false);
                        oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 3, false);
                        oTable.fnDraw();
                    }

                    function cancelEditRow(oTable, nRow) {
                        var jqInputs = $('input', nRow);
                        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
                        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
                        oTable.fnUpdate('<a class="edit" href="">Sửa</a>', nRow, 2, false);
                        oTable.fnDraw();
                    }

                    var oTable = $('#tableTaiKhoan').dataTable({
                        "aLengthMenu": [
                            [5, 15, 20, -1],
                            [5, 15, 20, "All"] // change per page values here
                        ],
                        // set the initial value
                        "iDisplayLength": 5,

                        "sPaginationType": "bootstrap",
                        "oLanguage": {
                            "sLengthMenu": "_MENU_ records",
                            "oPaginate": {
                                "sPrevious": "Prev",
                                "sNext": "Next"
                            }
                        },
                        "aoColumnDefs": [{
                            'bSortable': false,
                            'aTargets': [0]
                        }
                        ]
                    });

                    jQuery('#tableTaiKhoan_wrapper .dataTables_filter input').addClass("form-control input-medium"); // modify table search input
                    jQuery('#tableTaiKhoan_wrapper .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown
                    jQuery('#tableTaiKhoan_wrapper .dataTables_length select').select2({
                        showSearchInput: false //hide search box with special css class
                    }); // initialize select2 dropdown

                    var nEditing = null;

                    $('#tableTaiKhoan_new').click(function (e) {
                        e.preventDefault();
                        var aiNew = oTable.fnAddData(['', '', '', '',
                                '<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
                        ]);
                        var nRow = oTable.fnGetNodes(aiNew[0]);
                        editRow(oTable, nRow);
                        nEditing = nRow;
                    });

                    $('#tableTaiKhoan a.delete').live('click', function (e) {
                        e.preventDefault();

                        if (confirm("Are you sure to delete this row ?") == false) {
                            return;
                        }

                        var nRow = $(this).parents('tr')[0];
                        oTable.fnDeleteRow(nRow);
                        alert("Deleted! Do not forget to do some ajax to sync with backend :)");
                    });

                    $('#tableTaiKhoan a.cancel').live('click', function (e) {
                        e.preventDefault();
                        if ($(this).attr("data-mode") == "new") {
                            var nRow = $(this).parents('tr')[0];
                            oTable.fnDeleteRow(nRow);
                        } else {
                            restoreRow(oTable, nEditing);
                            nEditing = null;
                        }
                    });

                    $('#tableTaiKhoan a.edit').live('click', function (e) {
                        e.preventDefault();

                        /* Get the row as a parent of the link that was clicked on */
                        var nRow = $(this).parents('tr')[0];

                        if (nEditing !== null && nEditing != nRow) {
                            /* Currently editing - but not this row - restore the old before continuing to edit mode */
                            restoreRow(oTable, nEditing);
                            editRow(oTable, nRow);
                            nEditing = nRow;
                        } else if (nEditing == nRow && this.innerHTML == "Save") {
                            /* Editing this row and want to save it */
                            saveRow(oTable, nEditing);
                            nEditing = null;

                            // Save 

                            alert("Updated! Do not forget to do some ajax to sync with backend :)");
                        } else {
                            /* No edit in progress - let's start one */
                            editRow(oTable, nRow);
                            nEditing = nRow;
                        }
                    });
                }

            };

        }();
</script>

<script>
    $(document).ready(function () {
        TableEditable.init();
    })
</script>